<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file upload and download</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="panel panel-success" style="margin-top: 10px;">
            <div class="panel-heading" >
                <h3>File upload form:</h3>
            </div>
            <div class="panel-body">
                <form id="upload-form" enctype="multipart/form-data">
                    <div class="form-group">
                        <input type="file" name="file" id="file" class="form-control"/>
                    </div>
                    <button type="button" id="upload" class="btn btn-success">upload</button>
                </form>
            </div>
            <div class="panel-footer">
                <h3>File download list:</h3>
                <table class="table">
                    <thead>
                        <tr>
                            <th>file name</th><th>upload time</th><th>download</th>
                        </tr>
                    </thead>
                    <tbody>
                        <#if data?size gt 0>
                            <#list data as file>
                                <tr>
                                    <td>${file.name}</td>
                                    <td>${file.uploadTime?string("yyyy-MM-dd")}</td>
                                    <td>
                                        <a href="download/${file.name}" data-id="${file.name}" class="btn btn-primary">download</a>
                                    </td>
                                </tr>
                            </#list>
                        <#else>
                            <tr>
                                <td colspan="3" class="text-center">please upload a file.</td>
                            </tr>
                        </#if>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $("#upload").on("click",function () {
           var fileObj = document.getElementById("file").files[0];
           var form = new FormData();
           form.append("file",fileObj);
           var xhr = new XMLHttpRequest();
           xhr.open("post","http://localhost:8080/upload",true);
           xhr.onload = function(event){
               alert(event.currentTarget.responseText);
               window.location.href = window.location.href;
           };
           xhr.send(form);
        });
    </script>
</body>
</html>